<template>
  <div class="home">

    <div class="left">
      <h1 class="title">欢迎使用Jenkins</h1>
    </div>

    <div class="login">
      <el-input
          v-model="LoginData.user"
          placeholder="请输入用户名"
          style="width: 80%"
      />
      <div class="spacer"></div>
      <el-input
          v-model="LoginData.password"
          placeholder="请输入密码"
          show-password
          style="width: 80%"
          type="password"
      />
      <div class="spacer"></div>

      <div class="code">
        <el-input
            v-model="LoginData.code"
            placeholder="请输入验证码"
            style="width: 60%"
        />
        <div ref="img" class="img" @click="GetCode"></div>
      </div>

      <el-button
          style="width: 80%; height: 45px; margin-top: 5%; "
          type="primary"
          @click="login"
      >登录
      </el-button>
    </div>
  </div>
</template>

<script setup>
import {onMounted, onUnmounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";

onMounted(() => {
  GetCode()
  window.addEventListener('keyup', handleKeyUp)
})

onUnmounted(() => {
  window.removeEventListener('keyup', handleKeyUp)
})

const LoginData = ref({
  user: '',
  password: '',
  code: ''
})

const img = ref('')

const GetCode = () => {
  axios.get('/api/getCode').then((res) => {
    if (res.data.code === 200) {
      const svgBlob = new Blob([res.data.data], {type: 'image/svg+xml'});
      const svgUrl = URL.createObjectURL(svgBlob);
      const imgElement = document.createElement('img');
      imgElement.src = svgUrl;
      img.value.innerHTML = '';
      img.value.appendChild(imgElement);
    } else {
      ElMessage.error('获取验证码异常！')
    }
  }).catch((err) => {
    ElMessage.error(`服务器连接异常！ ${err}`)
    setTimeout(() => {
      GetCode()
    }, 2000)
  })
}

const login = () => {
  axios.post('/api/login', LoginData.value).then((res) => {
    const data = res.data
    if (data.code === 201) {
      localStorage.setItem('token', data.data.token)
      ElMessage.success(`欢迎进入${data.data.UserInfo.name}进入系统`)
      router.push({name: 'index'})
    } else {
      ElMessage.error(`${data.msg}`)
      LoginData.value.code = null
      GetCode()
    }
  }).catch((err) => {
    ElMessage.error(`登陆失败！服务器连接异常！ ${err}`)
    setTimeout(() => {
      login()
    }, 2000)
  })
}

const handleKeyUp = (e) => {
  if (e.key === 'Enter') {
    login();
  }
}

</script>

<style lang="scss" scoped>
.home {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 99vw;
  height: 97vh;
  background-image: url("/login.png");
  background-size: cover;
  background-position: center;
  overflow: hidden;
  margin: 10px;


  .left {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: revert;
    background-color: rgba(255, 255, 255, 0.23);
    box-shadow: 2px 1px 5px 1px rgba(33, 33, 33, 0.13);
    min-width: 350px;
    min-height: 450px;


    .title:hover {
      color: #5389f3;
      box-shadow: 5px 5px 5px 5px rgba(255, 255, 255, 0.25);
    }
  }


  .login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-items: center;
    align-items: center;
    align-self: center;
    padding: 10px;
    border: 1px solid rgba(33, 33, 33, 0.13);
    box-shadow: 2px 1px 5px 1px rgba(33, 33, 33, 0.13);
    min-width: calc(800px - 450px);
    min-height: calc(800px - 350px);
    background-color: rgba(255, 255, 255, 0.23);

    .code {
      display: flex;
      width: 80%;
      height: 50px;
      align-items: center;
      justify-content: center;
      justify-items: center;

      .img {
        align-items: center;
        justify-items: center;
        justify-content: center;
        height: 50px !important;
        transform: scale(0.7);
      }
    }

    .spacer {
      height: 30px;
    }
  }
}
</style>